<?php
require_once("/home/bluecbhv/Jcuhelpers-WebTech/Google_Custom_Search/JSON/Search_Results.php");
?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JCU Helpers - Web Technology Project</title>
<link href="/Jcuhelpers-WebTech/Site.css" rel="stylesheet" type="text/css" />
<link href="/Jcuhelpers-WebTech/1140.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function showLightbox() {
	document.getElementById("light").style.display =
	document.getElementById("fade").style.display = "block";
}

/***********************************************/

function closeLightbox() {
	document.getElementById("light").style.display =
	document.getElementById("fade").style.display = "none";
}
function showLightboxContent(lightboxContent) {
	showLightbox();
	
	document.getElementById("lightbox").innerHTML =	"<div>"+lightboxContent+"</div>";
	
	var replaceCommas = document.getElementById("keywords").innerHTML;
	document.getElementById("keywords").innerHTML = "<b><u>Keywords<\/u><\/b>:<br \/>"+replaceCommas.replace(/,/g, "<br \/>");
}
function getWebDesignTrends() {
	var prefix = "https://api.browshot.com/api/v1/simple?url=";
	var suffix = "&width=200&height=200&key=3L9I59n0EBWhs4k6QcM2dCTVUGYkfOl2";
	var count = 0;
	var arrayCount = 0;
	var remainder;
	var numRows;
	
	var last;
	var secondLast;
	
	for (i = 0; i < Search_Results.Search_Results.length; i++) {
		count++;
	}
	
	remainder = count % 3;
	
	if (remainder == 1) {
		last = count - 1;
		numRows = (last / 3) + 1;
		document.writeln(numRows);
	} else if (remainder == 2) {
		last = count - 1;
		secondLast = count - 2;
		numRows = (secondLast / 3) + 1;
		document.writeln(numRows);
	} else if (remainder == 0) {
		numRows = count / 3;
		
		for (i = 0; i < numRows; i++) {
			for (j = 0; j < (arrayCount+3); j++) {
				if ((j%3) == 0) {
					document.write("<div class='row'>");
					document.write("<div class='first three_col'><br /><a onclick=\"javascript:showLightboxContent("+"'<h2>"+Search_Results.Search_Results[j].Title+"<\/h2><a href=&quot;"+Search_Results.Search_Results[j].Link+"&quot; target=&quot;_blank&quot;><img src=&quot;"+Search_Results.Search_Results[j].Image+"&quot; \/><\/a><br \/><div id=&quot;keywords&quot;>"+Search_Results.Search_Results[j].Keywords+"<\/div>');\"><img src='"+Search_Results.Search_Results[j].Image+"' ></a><br /><br />"+Search_Results.Search_Results[j].Domain+"</div>");
				} else if ((j%3) == 1) {
					document.write("<div class='three_col'><br /><a onclick=\"javascript:showLightboxContent("+"'<h2>"+Search_Results.Search_Results[j].Title+"<\/h2><a href=&quot;"+Search_Results.Search_Results[j].Link+"&quot; target=&quot;_blank&quot;><img src=&quot;"+Search_Results.Search_Results[j].Image+"&quot; \/><\/a><br \/><div id=&quot;keywords&quot;>"+Search_Results.Search_Results[j].Keywords+"<\/div>');\"><img src='"+Search_Results.Search_Results[j].Image+"' ></a><br /><br />"+Search_Results.Search_Results[j].Domain+"</div>");
				} else if ((j%3) == 2) {
					document.write("<div class='last three_col'><br /><a onclick=\"javascript:showLightboxContent("+"'<h2>"+Search_Results.Search_Results[j].Title+"<\/h2><a href=&quot;"+Search_Results.Search_Results[j].Link+"&quot; target=&quot;_blank&quot;><img src=&quot;"+Search_Results.Search_Results[j].Image+"&quot; \/><\/a><br \/><div id=&quot;keywords&quot;>"+Search_Results.Search_Results[j].Keywords+"<\/div>');\"><img src='"+Search_Results.Search_Results[j].Image+"' ></a><br /><br />"+Search_Results.Search_Results[j].Domain+"</div></div>");
				}
				
				arrayCount++;
			}
		}
	}
}
</script>
</head>

<body>
<div id="main_content">
  <div id="header">Web Design Trends</div>
  <div class="container"> 
    <script>getWebDesignTrends();</script>
    <div id="light" class="white_content">
      <div id="close"><a onclick="javascript:closeLightbox();">Close</a></div>
      <div id="lightbox"></div>
    </div>
    <div id="fade" class="black_overlay"></div>
  </div>
</div>
</body>
</html>